@import "math";
@import "color";

$edge-list: 0px, 8px, 10px, 20px;
$font-size-list: px2rem(20px),
px2rem(18px),
px2rem(16px),
px2rem(15px),
px2rem(13px),
px2rem(12px);

$size-1: nth($font-size-list, 1);
$size-2: nth($font-size-list, 2);
$size-3: nth($font-size-list, 3);
$size-4: nth($font-size-list, 4);
$size-5: nth($font-size-list, 5);
$size-6: nth($font-size-list, 6);


@mixin margin($direction, $n: 20) {
  @if ($direction == l) {
    margin-left: $n;
  } @else if ($direction == r) {
    margin-right: $n;
  } @else if ($direction == t) {
    margin-top: $n;
  } @else if ($direction == b) {
    margin-bottom: $n;
  }
}

@mixin padding($direction, $n: 20) {
  @if ($direction == l) {
    padding-left: $n;
  } @else if ($direction == r) {
    padding-right: $n;
  } @else if ($direction == t) {
    padding-top: $n;
  } @else if ($direction == b) {
    padding-bottom: $n;
  }
}
